import 'package:demo_app_video/commons/commons.dart';
import 'package:demo_app_video/commons/router/routes.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class SearchPage extends StatefulWidget {
  const SearchPage({Key? key}) : super(key: key);

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffFFFFFF),
      body: Stack(
        children: [
          Container(
            width: double.infinity,
            height: double.infinity,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('images/search_bg.png'),
                    fit: BoxFit.fill)),
          ),
          SingleChildScrollView(
            padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
            child: Column(
              children: [
                Container(
                  width: 360.w,
                  height: 44.h,
                  margin: EdgeInsets.only(left: 10.w, right: 10.w),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      InkWell(
                        onTap: () {
                          Routes().popNowPage(context);
                        },
                        child: Image.asset(
                          'images/back_arrow.png',
                          width: 16.w,
                          height: 16.h,
                        ),
                      ),
                      Text(
                        '搜索',
                        style: TextStyle(
                            color: Color(0xff333333),
                            fontSize: 16.sp,
                            fontWeight: FontWeight.w500),
                      ),
                      Container(
                        width: 16.w,
                      )
                    ],
                  ),
                ),
                Container(
                  width: 328.w,
                  height: 40.h,
                  margin: EdgeInsets.only(top: 10.h),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: Color(0xffFFFFFF),
                      borderRadius: BorderRadius.circular(24.sp)),
                  padding: EdgeInsets.only(left: 12.w, right: 12.w),
                  child: Row(
                    children: [
                      SizedBox(
                        width: 200.w,
                        height: 40.h,
                        child: TextField(
                          onSubmitted: (value) {
                            Commons().closeBoard(context);
                            Routes().push(context, Routes.search_details,
                                {'search_key': _controller.text});
                          },
                          controller: _controller,
                          decoration: InputDecoration(
                              contentPadding: EdgeInsets.all(0),
                              border: OutlineInputBorder(
                                  borderSide: BorderSide.none),
                              hintText: '输入短剧名进行搜索',
                              hintStyle: TextStyle(
                                  color: Color(0xffBFBFBF), fontSize: 15.sp)),
                          scrollPadding: EdgeInsets.all(0),
                        ),
                      ),
                      Expanded(child: Container()),
                      GestureDetector(
                        onTap: () {
                          Commons().closeBoard(context);
                          Routes().push(context, Routes.search_details,
                              {'search_key': _controller.text});
                        },
                        child: Image.asset(
                          'images/search_icon.png',
                          width: 20.w,
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
